<template>
  <div class="face">
    <div class="face-form">
      <fc-wf
          color="#9cdbd8"
          dur=4
      >
        <img src="../assets/logo.png" alt="">
      </fc-wf>
    </div>
    <div class="face-input">
      <vs-input
          shadow
          icon-after
          success
          v-model="user.name"
          label-placeholder="用户名">
        <template #icon>
          <span class="material-icons">
          person_pin
          </span>
        </template>
      </vs-input>
      <vs-input
          icon-after
          color="#7d33ff"
          type="password"
          v-model="user.passwd"
          placeholder="密码">
        <template #icon>
          <span class="material-icons">
          lock_open
          </span>
        </template>
        <template #message-warn>
          密码6~13位必须字母和数字哦
        </template>
      </vs-input>
      <vs-input
          icon-after
          color="rgb(59,222,200)"
          v-model="user.passwdt"
          type="password"
          placeholder="确认密码">
        <template #icon>
          <span class="material-icons">
          https
          </span>
        </template>
      </vs-input>
    </div>
    <div class="face-but">
      <fc-bubb click>
        <fc-arr-btn right @click="goLogin">去登录</fc-arr-btn>
      </fc-bubb>
      <fc-bubb click>
        <fc-un-btn @click="regit">注册</fc-un-btn>
      </fc-bubb>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  props: {
    msg: String
  },
  data(){
    return{
      user:{
        name:'',
        passwd:'',
        passwdt:'',
      },

    }
  },
  methods:{
    // 注册用户
    async regit(){
      if(this.user.name == '' || this.user.passwd == '' || this.user.passwd !== this.user.passwdt){
        this.$vs.notification({
          position:'top-center',
          icon:'<span class="material-icons">error</span>',
          color:'danger',
          title: '错误',
          text: `用户名和密码不能为空且可能是两次密码不一致`
        })
        return false
      }
      var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,13}$/ // 密码6~13位 必须包含大小写字母和数字的组合
      var pass = re.test(this.user.passwd);
      if(!pass){
        this.$vs.notification({
          position:'top-center',
          icon:'<span class="material-icons">error</span>',
          color:'warn',
          title: '错误',
          text: `密码6~13位 必须包含大小写字母和数字的组合哦`
        })
        return false
      }
      // 注册接口
      var result = await this.$proxy.regdit(this.user)
      console.log(result);
      if(result.code === 0){
        this.$vs.notification({
          position:'top-center',
          icon:'<span class="material-icons">error</span>',
          color:'warn',
          title: '错误',
          text: result.msg
        })
        return false
      }else if(result.code === 1){
        this.$vs.notification({
          position:'top-center',
          icon:'<span class="material-icons">check</span>',
          color:'success',
          title: '成功',
          text: '注册成功'
        })
        this.$router.push(('/login'))
      }
    },

    // 去登录
    goLogin(){
      this.$router.push('/login');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.face .face-form{
  border-radius: 2px 2px 10px 10px;
  box-shadow: 2px 2px 20px #40bab3;
}
.face .face-form fc-wf {
  margin: 0 auto;
}
.face .face-input{
  display: flex;
  flex-direction: column;
  margin-top: 2%;
  justify-content: center;
}
.face .face-input .vs-input-parent{
  margin: 2rem;
}
.face .face-but{
  display: flex;
  padding: 5% 15%;
  justify-content: space-around;
}
</style>
